<template>
  <div class="login-page min-h-screen flex flex-col bg-gradient-to-r from-blue-50 via-purple-50 to-pink-50">
    <!-- 顶部简化导航 -->
    <div class="py-6">
      <div class="container mx-auto px-4 flex justify-between items-center">
        <router-link to="/" class="logo flex items-center">
          <h1 class="text-3xl font-bold text-red-600">阿蔓达医药商城</h1>
          <span class="ml-3 text-gray-500">惠聚优质商品</span>
        </router-link>
        <div class="hidden sm:block">
          <span class="text-gray-600 text-sm">客服电话：0539-7422900</span>
        </div>
      </div>
    </div>
    
    <!-- 主要内容区域 -->
    <div class="flex-1 flex items-center justify-center py-10">
      <div class="container mx-auto px-4">
        <div class="flex flex-wrap justify-center">
          <!-- 左侧 Banner -->
          <div class="w-full lg:w-1/2 mb-8 lg:mb-0 lg:pr-8 hidden md:block">
            <div class="banner-bg rounded-2xl overflow-hidden shadow-lg bg-gradient-to-br from-cyan-500 to-purple-600 p-1">
              <div class="inner-content bg-white bg-opacity-10 backdrop-blur-sm rounded-xl p-12 flex flex-col justify-center h-full text-white">
                <h2 class="text-3xl font-bold mb-6">欢迎回到 阿蔓达医药商城</h2>
                <p class="text-lg mb-8 text-white text-opacity-90">在这里发现品质好物，享受优质购物体验</p>
                
                <div class="features space-y-4">
                  <div class="feature flex items-center">
                    <div class="icon-circle bg-white bg-opacity-20 p-2 rounded-full mr-4">
                      <el-icon :size="24"><ShoppingCart /></el-icon>
                    </div>
                    <span>海量商品，一站购齐</span>
                  </div>
                  <div class="feature flex items-center">
                    <div class="icon-circle bg-white bg-opacity-20 p-2 rounded-full mr-4">
                      <el-icon :size="24"><PriceTag /></el-icon>
                    </div>
                    <span>会员专享特惠价格</span>
                  </div>
                  <div class="feature flex items-center">
                    <div class="icon-circle bg-white bg-opacity-20 p-2 rounded-full mr-4">
                      <el-icon :size="24"><Promotion /></el-icon>
                    </div>
                    <span>新用户专享优惠券</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 右侧登录框 -->
          <div class="w-full lg:w-1/2 lg:pl-8 flex justify-center items-center">
            <el-card class="login-card bg-white rounded-2xl shadow-xl border-0 w-full max-w-md" :body-style="{ padding: '40px' }">
              <div class="text-center mb-8">
                <h2 class="text-2xl font-bold text-gray-800">用户登录</h2>
                <p class="text-gray-500 mt-2">登录您的账号，开启优质购物之旅</p>
              </div>
              
              <div class="login-form">
                <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules">
                  <!-- 用户名/手机号 -->
                  <el-form-item prop="username">
                    <el-input
                      v-model="loginForm.username"
                      placeholder="用户名/手机号"
                      size="large"
                      :prefix-icon="User"
                    />
                  </el-form-item>
                  
                  <!-- 密码 -->
                  <el-form-item prop="password">
                    <el-input
                      v-model="loginForm.password"
                      type="password"
                      placeholder="密码"
                      size="large"
                      :prefix-icon="Lock"
                      show-password
                    />
                  </el-form-item>
                  
                  <!-- 额外选项 -->
                  <div class="flex justify-between mb-6 text-sm">
                    <el-checkbox v-model="loginForm.remember">记住我</el-checkbox>
                    <router-link to="/forgot-password" class="text-blue-600 hover:text-blue-800">忘记密码？</router-link>
                  </div>
                  
                  <!-- 登录按钮 -->
                  <el-button
                    type="danger"
                    size="large"
                    class="w-full py-3 text-base rounded-lg"
                    @click="handleLogin"
                    :loading="isLoading"
                  >
                    {{ isLoading ? '登录中...' : '登录' }}
                  </el-button>
                </el-form>

              </div>
            </el-card>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 简化页脚 -->
    <div class="py-6 text-center text-sm text-gray-500">
      <div class="container mx-auto px-4">
        <div class="footer-links space-x-3 mb-2">
          <router-link to="/" class="text-gray-600 hover:text-red-600">关于我们</router-link> |
          <router-link to="/" class="text-gray-600 hover:text-red-600">售后服务</router-link>
        </div>
        <p>CopyRight @ 阿蔓达医药商城 {{ new Date().getFullYear() }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'
import { 
  User,
  Lock,
  ShoppingCart,
  PriceTag,
  Promotion
} from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'

const router = useRouter()
const userStore = useUserStore()
const loginFormRef = ref<FormInstance>()
const isLoading = ref(false)

const loginForm = reactive({
  username: '',
  password: '',
  remember: false
})

const loginRules = reactive<FormRules>({
  username: [
    { required: true, message: '请输入用户名/手机号', trigger: 'blur' },
    { min: 3, message: '长度至少为3个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少为6位', trigger: 'blur' }
  ]
})

const handleLogin = async () => {
  if (!loginFormRef.value) return
  
  try {
    await loginFormRef.value.validate()
    isLoading.value = true
    

    await userStore.loginUser({
      username: loginForm.username,
      password: loginForm.password
    })

    // Remember user if checked
    if (loginForm.remember) {
      localStorage.setItem('username', loginForm.username)
    } else {
      localStorage.removeItem('username')
    }
    
    ElMessage.success('登录成功')
    router.push('/')
  } catch (error: any) {
    const errorMessage ='登录失败，请重试'
    ElMessage.error(errorMessage)
  } finally {
    isLoading.value = false
  }
}


</script>

<style scoped>
.container {
  max-width: 1400px;
  margin: 0 auto;
}

.login-page {
  display: flex;
  flex-direction: column;
}

.login-card {
  transition: transform 0.3s;
}

.login-card:hover {
  transform: translateY(-5px);
}

/* 自定义登录框阴影 */
.login-card {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1),
              0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* 自定义登录按钮样式 */
:deep(.el-button--danger) {
  background-color: #e1251b;
  border-color: #e1251b;
  transition: all 0.3s;
}

:deep(.el-button--danger:hover) {
  background-color: #c81623;
  border-color: #c81623;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(225, 37, 27, 0.3);
}

/* 输入框焦点样式 */
:deep(.el-input__inner:focus) {
  border-color: #e1251b;
}

/* 社交登录按钮动画 */
.social-item {
  transition: all 0.3s;
}

.social-item:hover {
  transform: translateY(-3px) scale(1.05);
}

@media (max-width: 768px) {
  .login-card {
    max-width: 90%;
  }
}
</style> 